<template>
  <div>
    <div class="innerf-pages section">
      <div class="container" style="margin-left:400px">
        <div class="col-md-4 single-right-left ">
          <div class="grid images_3_of_2">
            <div class="flexslider1">
              <ul class="slides">
                <li data-thumb="images/s1.jpg">
                  <div class="thumb-image">
                    <img
                      :src="bookInfo.bookImage"
                      data-imagezoom="true"
                      alt=" "
                      class="img-responsive"
                    />
                  </div>
                </li>
              </ul>
              <div class="clearfix"></div>
            </div>
          </div>
        </div>
        <div
          class="col-md-8 single-right-left simpleCart_shelfItem"
          style="text-align: left;"
        >
          <h3>
            {{ bookInfo.bookShowname }}
            <span>{{ bookInfo.pressDate }}</span>
          </h3>
          <p>
            作者：
            <a href="#">{{ bookInfo.bookAuth }}</a>
          </p>
          <div class="caption">
            <div class="clearfix"></div>
            <h6>￥{{ bookInfo.bookPrice }}</h6>
          </div>
          <div class="desc_single">
            <h5>简介</h5>
            <p>
              LINXIN图书网专属 非常好的一本书，可以收藏试试看
            </p>
          </div>
          <div class="occasional">
            <h5>其它</h5>
            <ul class="single_specific">
              <li><span>别名 :</span> {{ bookInfo.bookName }}</li>
              <li><span>分类:</span> {{ bookInfo.typeName }}</li>
              <li><span>出版社 :</span> {{ bookInfo.bookPress }}</li>
              <li><span>出版时间 :</span>{{ bookInfo.pressDate }}</li>
            </ul>
          </div>
          <div class="clearfix"></div>
          <div class="description">
            <h5>
              收藏状态：
            </h5>
            <form>
              <el-button
                v-if="bookInfo.collectState == null"
                @click="collect()"
                type="primary"
                icon="el-icon-star-off"
                round
                >点击收藏</el-button
              >
              <el-button
                v-if="bookInfo.collectState == 1"
                @click="cancelCollect()"
                type="danger"
                icon="el-icon-star-off"
                round
                >取消收藏</el-button
              >
            </form>
          </div>
          <div class="occasion-cart">
            <div class="chr single-item single_page_b">
              <form>
                <button @click="addShoppingCar" type="button" class="chr-cart pchr-cart">
                  <i class="fa fa-cart-plus" aria-hidden="true"></i>
                  加入购物车
                </button>
              </form>
            </div>
          </div>
        </div>
        <div class="clearfix"></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "showSingleBookInfo",
  data() {
    return {
      bookInfo: {},
      bookId: ""
    };
  },
  methods: {
    collect() {
      if (localStorage.getItem("token") == null) {
        alert("请先登录");
        return;
      }
      this.$http
        .get("/userInfo/user/collect?bookId=" + this.bookId)
        .then(resp => {
          alert(resp.data.message);
          this.findBookInfo();
        });
    },
    cancelCollect() {
      if (localStorage.getItem("token") == null) {
        alert("请先登录");
        return;
      }
      this.$http
        .get("/userInfo/user/cancelCollect?bookId=" + this.bookId)
        .then(resp => {
          alert(resp.data.message);
          this.findBookInfo();
        });
    },
    findBookInfo() {
      this.$http
        .get("/bookInfo/user/findBookInfoById?bookId=" + this.bookId)
        .then(resp => {
          this.bookInfo = resp.data.data;
        });
    },
    addShoppingCar(){
      if (localStorage.getItem("token") == null) {
        alert("请先登录");
        return;
      }
      this.$http.get("/userInfo/user/addShopping",{
        params:{
          bookId:this.bookId,
          number:1
        }
      }).then(resp=>{
        alert(resp.data.message)
      })
    }
  },
  created() {
    this.bookId = sessionStorage.getItem("singleBookId");
    console.log(this.bookId);
    this.findBookInfo();
  },
  mounted() {}
};
</script>

<style scoped>
@import "../../../assets/login/css/bootstrap.css";
@import "../../../assets/login/css/shop.css";
@import "../../../assets/login/css/flexslider.css";
@import "../../../assets/login/css/style.css";
@import "../../../assets/login/css/font-awesome.css";
</style>
